<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.loading-wp {
		height: 50px;
	    width: 50px;
	    border-radius: 50%;
		position: relative;
	    background: linear-gradient(red, #fff);
	    /*-webkit-animation: loading 1s infinite;*/
	    animation: loading 1s linear infinite;
	}

	.loading-wp > .loading {
		height: 40px;
	    width: 40px;
	    position: absolute;
	    border-radius: 50%;
	    background-color: #fff;
	    /*margin: 5px;*/
		top: 5px;
		left: 5px;
	}

	/* @-webkit-keyframes loading {
	  0% {-webkit-transform : rotate(0deg);}
	  100% {-webkit-transform : rotate(360deg);}
	} */

	@keyframes loading {
		0% {transform: rotate(0deg);}
		100% {transform: rotate(360deg);}
	}
	</style>
</head>
<body>

	<div class="loading-wp">
		<div class="loading"></div>
	</div>

</body>
</html>